<template>
  <div class="button-block">
    <!-- 你的内容放这里 -->
    <button class="button" @click="showUploadDialog">上传文件</button>
    <button class="button" @click="showDetectDialog">开始检测</button>
    <button class="button" @click="stopDetect">停止检测</button>

    <!-- 上传文件对话框 -->
    <ElDialog
      v-model="uploadDialogVisible"
      title="上传视频文件"
      width="500px"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
    >
      <div class="upload-container">
        <ElUpload
          class="upload-area"
          drag
          action="http://localhost:9081/upload"
          :auto-upload="false"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          :limit="1"
          :accept="acceptedVideoTypes"
          :file-list="fileList"
        >
          <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持 MP4、AVI、MOV、WMV、FLV 等常见视频格式
            </div>
          </template>
        </ElUpload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpload" :disabled="!selectedFile">
            上传
          </el-button>
        </span>
      </template>
    </ElDialog>

    <!-- 开始检测对话框 -->
    <ElDialog
      v-model="detectDialogVisible"
      title="开始检测"
      width="400px"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
    >
      <div class="detect-form">
        <el-form :model="detectForm" label-width="80px">
          <el-form-item label="站点">
            <el-select v-model="detectForm.station" placeholder="请选择站点" style="width: 100%">
              <el-option
                v-for="item in stationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车次">
            <el-input v-model="detectForm.trainNumber" placeholder="请输入车次" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleBeginDetect" :disabled="!isDetectFormValid">
            开始检测
          </el-button>
        </span>
      </template>
    </ElDialog>
  </div>
</template>

<script setup>
// 导入必要的文件（例如：组件、工具函数、第三方库等）
import { ref, computed, watch, onMounted, onBeforeMount, onUpdated, onBeforeUpdate, onUnmounted, onActivated } from 'vue';
import axios from 'axios';
import { ElNotification, ElDialog, ElUpload, ElButton, ElIcon, ElForm, ElFormItem, ElSelect, ElOption, ElInput } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue';
import 'element-plus/es/components/notification/style/css';
import 'element-plus/es/components/dialog/style/css';
import 'element-plus/es/components/upload/style/css';
import 'element-plus/es/components/button/style/css';
import 'element-plus/es/components/icon/style/css';
import 'element-plus/es/components/form/style/css';
import 'element-plus/es/components/form-item/style/css';
import 'element-plus/es/components/select/style/css';
import 'element-plus/es/components/input/style/css';

// 使用 ref 定义响应式数据
const dataVar = ref('');

// 定义计算属性
const computedVar = computed(() => {
  return dataVar.value + ' computed';
});

// 使用 watch 监听数据变化
watch(dataVar, (newValue, oldValue) => {
  console.log('数据变化:', newValue);
});

// 上传对话框相关
const uploadDialogVisible = ref(false);
const fileList = ref([]);
const selectedFile = ref(null);

// 支持的视频格式
const acceptedVideoTypes = '.mp4,.avi,.mov,.wmv,.flv,.mkv,.webm';

// 检测对话框相关
const detectDialogVisible = ref(false);
const detectForm = ref({
  station: '',
  trainNumber: ''
});

// 站点选项
const stationOptions = [
  { value: 'station1', label: '站点1' },
  { value: 'station2', label: '站点2' },
  { value: 'station3', label: '站点3' }
];

// 表单验证
const isDetectFormValid = computed(() => {
  return detectForm.value.station && detectForm.value.trainNumber.trim();
});

// 显示上传对话框
const showUploadDialog = () => {
  uploadDialogVisible.value = true;
  fileList.value = [];
  selectedFile.value = null;
};

// 处理文件选择
const handleFileChange = (file) => {
  selectedFile.value = file.raw;
};

// 处理文件移除
const handleFileRemove = () => {
  selectedFile.value = null;
};

// 处理文件上传
const handleUpload = () => {
  if (!selectedFile.value) return;

  const formData = new FormData();
  formData.append('file', selectedFile.value);

  axios.post('http://localhost:9081/detect/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    if (response.data.success) {
      ElNotification({
        title: '成功',
        message: '文件上传成功',
        type: 'success',
        duration: 2000,
        position: 'top-right',
        customClass: 'custom-notification'
      });
      uploadDialogVisible.value = false;
    } else {
      ElNotification({
        title: '错误',
        message: response.data.message || '文件上传失败',
        type: 'error',
        duration: 2000,
        position: 'top-right',
        customClass: 'custom-notification'
      });
    }
  }).catch(error => {
    ElNotification({
      title: '错误',
      message: '服务器连接失败，请检查网络',
      type: 'error',
      duration: 2000,
      position: 'top-right',
      customClass: 'custom-notification'
    });
  });
};

// 显示检测对话框
const showDetectDialog = () => {
  detectDialogVisible.value = true;
  detectForm.value = {
    station: '',
    trainNumber: ''
  };
};

// 处理开始检测
const handleBeginDetect = () => {
  if (!isDetectFormValid.value) return;

  axios.post('http://localhost:9081/detect/begin', {
    station: detectForm.value.station,
    trainNumber: detectForm.value.trainNumber
  }).then(response => {
    if (response.data.success) {
      ElNotification({
        title: '成功',
        message: '开始检测',
        type: 'success',
        duration: 2000,
        position: 'top-right',
        customClass: 'custom-notification'
      });
      detectDialogVisible.value = false;
    } else {
      ElNotification({
        title: '错误',
        message: response.data.message || '开始检测失败',
        type: 'error',
        duration: 2000,
        position: 'top-right',
        customClass: 'custom-notification'
      });
    }
  }).catch(error => {
    ElNotification({
      title: '错误',
      message: '服务器连接失败，请检查网络',
      type: 'error',
      duration: 2000,
      position: 'top-right',
      customClass: 'custom-notification'
    });
  });
};

// 停止检测
const stopDetect = () => {
  axios.post('http://localhost:9081/detect/stop').then(response => {
    if (response.data.success) {
      ElNotification({
        title: '成功',
        message: '停止检测',
        type: 'success',
        duration: 2000,
        position: 'top-right',
        customClass: 'custom-notification'
      });
    } else {
      ElNotification({
        title: '错误',
        message: '停止检测失败',
        type: 'error',
        duration: 2000,
        position: 'top-right',
        customClass: 'custom-notification'
      });
    }
  }).catch(error => {
    ElNotification({
      title: '错误',
      message: '服务器连接失败，请检查网络',
      type: 'error',
      duration: 2000,
      position: 'top-right',
      customClass: 'custom-notification'
    });
  });
};

// 生命周期钩子
onBeforeMount(() => {
  console.log('挂载前');
});
onMounted(() => {
  console.log('挂载完成');
});
onBeforeUpdate(() => {
  console.log('更新前');
});
onUpdated(() => {
  console.log('更新完成');
});
onUnmounted(() => {
  console.log('卸载完成');
});
onActivated(() => {
  console.log('激活');
});

// 方法 - 定义操作数据的函数
const myMethod = () => {
  console.log('我的方法');
};
</script>

<style scoped >
/* 你的样式写这里 */
.button-block {
  width: 200px;
  overflow-y: auto;
  border-radius: 12px;
  border: 3px solid #fff;
  padding: 15px;
  color: #fff;
  font-family: Arial, sans-serif;
  margin: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.button-block:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.button {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #fff;
  color: #000;
}

.button:active {
  background-color: #000;
  color: #fff;
}


</style>